<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="templates2/layout.xhtml">
<ui:define name="header">
		<ui:include src="templates2/header.xhtml">
			<ui:param name="current" value="Create new Saving Transaction"></ui:param>
			<ui:param name="title" value="Saving Account Management"></ui:param>
		</ui:include>
	</ui:define>
	<ui:define name="content">
		<h:form>			
			<article class="module width_full"> <header>
			<h3>Create Transaction</h3>
			</header>
			<div class="module_content">
				
				<fieldset style="width: 48%; float: left;margin-right: 3%;">
					<label>Customer:</label>
					<h:outputText value="#{savingCreateTransManagedBean.customer.firstName}" style="width: 92%; font-weight: bold; color: black" readonly="true" /><br /><br />
					<label>Card Number ID:</label>
					<h:outputText value="#{savingCreateTransManagedBean.customer.idCardNumber}" style="width: 92%; font-weight: bold; color: black" readonly="true" /><br /><br />
					<label>Saving Account Number:</label>
					<h:outputText value="#{savingCreateTransManagedBean.customerAccount.accountNumber}" style="width: 92%; font-weight: bold; color: black" readonly="true" />
				</fieldset>
				
				<fieldset style="width: 48%; float: left;">
					<label>Balance:</label>
					<h:outputText value="#{savingCreateTransManagedBean.currentBalance}" style="width: 92%; font-weight: bold; font-size:20px; magrin-top:10px" readonly="true" />
				</fieldset>
				
				<fieldset style="width: 48%; float: left;margin-right: 3%;">
					<label>Funds</label>
					
					<h:inputText value="#{savingCreateTransManagedBean.funds}" readonly="false" style="width: 92%;" >
						<f:ajax execute="@this" render="otAfterBalance" event="blur" />
					</h:inputText>
				</fieldset>
				
				
				<fieldset style="width: 48%; float: left;">
					<label>TransactionType</label>
					<h:selectOneMenu id="types" value="#{savingCreateTransManagedBean.savingTransactionType}">
					  <f:selectItems value="#{savingCreateTransManagedBean.transactionTypes}" style="width: 92%" var="transactionType" 
					    itemValue="#{transactionType}" itemLabel="#{transactionType.name()}" />
					    <f:ajax execute="@this" render="pgInterestRate otAfterBalance otInterestRate" event="change"/>
					</h:selectOneMenu>
					
				</fieldset>
				
				<h:panelGroup id="pgInterestRate">
				<h:panelGroup rendered="#{savingCreateTransManagedBean.acceptNewRate}" >
				<fieldset style="width: 48%; float: left;margin-right: 3%;" >
					<label>Currency</label>
					<h:selectOneMenu value="#{savingCreateTransManagedBean.currencyID}" onchange="getCurrency()" >
					    <f:selectItems value="#{savingCreateTransManagedBean.currencies}" var="currency" itemValue="#{currency.currencyID}" itemLabel="#{currency.currency}"/>
					    <f:ajax execute="@this" render="otInterestRate otAfterBalance " event="change"/>
					</h:selectOneMenu>
				</fieldset>
				
				<fieldset style="width: 48%; float: left; ">
					<label>Interest Rate (%/year):</label>
					<h:outputText value="#{savingCreateTransManagedBean.newInterestRate}" id="otInterestRate" style="width: 92%; font-weight: bold; color: black; font-size:16px; magrin-top:10px" readonly="true" />
				</fieldset>
				
				<fieldset style="width: 48%; float: left;margin-right: 3%;">
					<label>Duration</label>
					<h:selectOneMenu value="#{savingCreateTransManagedBean.periodTypeID}">
					    <f:selectItems value="#{savingCreateTransManagedBean.periodTypes}" var="periodType" itemValue="#{periodType.periodTypeID}" itemLabel="#{periodType.savingPeriodType}"/>
						<f:ajax execute="@this" render="otInterestRate otAfterBalance otExpiredDate" event="change"/>
					</h:selectOneMenu>
				</fieldset>
				
				<fieldset style="width: 48%; float: left;" >
					<label>Expired Date:</label>
					<h:outputText value="#{savingCreateTransManagedBean.expiredDate}" id="otExpiredDate" style="width: 92%; font-weight: bold; font-size:18px; magrin-top:10px" readonly="true" >
						<f:convertDateTime pattern="dd-MM-yyyy" />
					</h:outputText>
				</fieldset>
				
				
				
				
				
				</h:panelGroup>
				</h:panelGroup>
				
				
				<fieldset style="width: 48%; float: left;" >
					<label>Balance After:</label>
					<h:outputText value="#{savingCreateTransManagedBean.afterBalance}" id="otAfterBalance" style="color: #{savingCreateTransManagedBean.acceptNewRate ? 'green' : 'red'}; width: 92%; font-weight: bold; font-size:18px; magrin-top:10px" readonly="true" />
				</fieldset>
				
				<div class="clear"></div>
			</div>
			<footer>
			<div class="submit_link">
				 
					<h:commandButton type="submit" value="Save" class="alt_btn" action="#{savingCreateTransManagedBean.createTransaction}" styleClass="alt_btn" />
					<h:commandButton type="submit" value="Back" class="alt_btn" action="savingAccView?faces-redirect=true" styleClass="alt_btn" />
			</div>
			</footer>
			<!-- <footer> <div class="submit_link">
				<input type="submit" value="Search" class="alt_btn" /> <input
					type="submit" value="Reset" />
			</div> </footer> --> 
			</article>
			<article class="module width_full"> <header>
			<h3 class="tabs_involved">Rate Details</h3>
			<!-- <ul class="tabs">
			<li class="active"><a href="#tab1">Posts</a></li>
			<li class=""><a href="#tab2">Comments</a></li>
		</ul> --> </header>

			<div class="tab_container">
				<div id="tab1" class="tab_content" style="display: block;">
					<h:dataTable styleClass="tablesorter"
						value="#{savingAllInterestManagedBean.savingInterestRates}" first=""
						var="i" rows="">
						<h:column>
							<f:facet name="header">Interest Rate ID</f:facet>
							#{i.interestRateID}
						</h:column>
						<h:column>
							<f:facet name="header">Rate</f:facet>
							#{i.rate}
						</h:column>
						<h:column>
							<f:facet name="header">Currency</f:facet>
							#{i.currency.currency}
						</h:column>
						<h:column>
							<f:facet name="header">Period Type</f:facet>
							#{i.periodType.savingPeriod} #{i.periodType.unit}
							<c:if test="${i.periodType.savingPeriod gt 1}">s</c:if>
						</h:column>
						<h:column>
							<f:facet name="header">Created Date</f:facet>
							#{i.createdDate}
						</h:column>
					</h:dataTable>
				</div>

			</div>
			 <!-- end of .tab_container --> </article>
		</h:form>
	</ui:define>
	<ui:define name="sidebar">
		<ui:include src="templates2/sidebar.xhtml">
			<ui:param name="current" value="home"></ui:param>
		</ui:include>
	</ui:define>
</ui:composition>
</html>